<template>
  <div class="uploadImage">
    <el-dialog :visible.sync="centerDialogVisible"
               :close-on-click-modal="clickModalHide"
               :before-close="closeDialog" width="500px"
               title="上传文件">
      <!--<el-upload style="text-align: center;"-->
        <!--class="avatar-uploader"-->
        <!--:show-file-list="false"-->
         <!--action=""-->
        <!--:auto-upload="false"-->
         <!--:on-change="changeFile">-->
        <!--<img v-show="imageUrl" :src="imageUrl" class="avatar">-->
        <!--<i v-show="!imageUrl"  class="el-icon-plus avatar-uploader-icon"></i>-->
        <!--<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过10M</div>-->
      <!--</el-upload>-->
      <el-upload style="text-align: center;"
          class="upload-demo"
          ref="uploadWb"
          :auto-upload="false"
          accept=".pdf,.PDF"
          drag
         :limit="1"
         :on-change="changeFile"
         action="">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传pdf文件，且不超过10M</div>
      </el-upload>
      <div style="text-align: center;margin-top: 15px">
        <el-button type="primary" @click="completeRepair">提交</el-button>
        <el-button @click="closeDialog" >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { getToken } from '@/utils/auth' // 验权
  export default {
    name: 'uploadImage',
    props: ['dataDetail'],
    data() {
      return {
        centerDialogVisible: false,
        clickModalHide: false,
        count: 0,
        imageUrl:"",
        fileName:""
      }
    },
    mounted() {

    },

    methods: {
      changeFile(file, fileList){
        this.beforeAvatarUpload(file);
      },

      beforeAvatarUpload(file) {
        let self = this;
        let isJPG =  file.name.indexOf(".pdf")>-1;
        const isLt2M = file.size / 1024 / 1024 < 10;
        if (!isJPG) {
          this.$message.error('上传文件只能是pdf格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传文件大小不能超过10MB!');
        }
        if(isJPG && isLt2M){
          let reader = new FileReader();
          reader.readAsDataURL(file.raw);
          reader.onload = function (e) {
            self.imageUrl = e.currentTarget.result;
            self.fileName = file.name.substring(0,file.name.indexOf(".pdf"))+(new Date()).getTime()+".pdf";
          };
        }else{
          self.$refs.uploadWb.clearFiles();
        }
        return isJPG && isLt2M;
      },

      completeRepair() {
        let self = this;
        if(this.count != 0 &&self.imageUrl){
          return;
        }
        this.count ++;
        let rowData = self.dataDetail;
        let param = {id: rowData.id,deviceId:rowData.deviceId};
        param.wbStatus = rowData.wbStatus =='3'?'5':'4';
        self.$confirm('确定完成？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$http({
            url: "/autoMonitor/manage/updateWbCompleteRepair",
            method: "post",
            params: param
          }).then(resp => {
            if (resp.success) {
              self.saveImage();
              return
            } else {
              self.$notify({
                title: '提示',
                message: "操作失败",
                type: 'error'
              });
            }
          });
        });
      },

      saveImage(){
        let self = this;
        self.$http({
          url: "/autoMonitor/manage/editDeviceWbDetail",
          method: "post",
          data: JSON.stringify({id:self.dataDetail.id,wbPath:self.imageUrl,fileName:self.fileName}),
          dataType: 'json',
          contentType: "application/json",
        }).then(resp => {
          if (resp.success) {
            self.closeDialog();
            self.$eventBus.$emit("updateDeviceWbDetail");
            self.$notify({
              title: '提示',
              message:"上传成功！",
              type: 'success'
            });
            return
          }
          self.$notify({
            title: '提示',
            message: "上传失败！",
            type: 'error'
          });
          this.count --;
        });
      },


      //关闭弹窗
      closeDialog() {
        this.imageUrl = "";
        this.$refs.uploadWb.clearFiles();
        this.centerDialogVisible = false;
      }

    },
    watch: {
      dataDetail(val) {
        this.imageUrl = "";
        this.count = 0;
        this.centerDialogVisible = true;
      }
    }
  }
</script>
<style scoped>
  /*.uploadImage .el-dialog__body{*/
    /*padding: 30px 0px;*/
  /*}*/

  .uploadImage .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .uploadImage .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .uploadImage .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
